<template>
    <div id="main">
        <!-- 头部区域 -->
        <div class="header">
            <span @click="$router.back(-1)">
                <van-icon name="arrow-left" />
            </span>
            <h2>设置</h2>
        </div>
        <!-- 个人账号 -->
        <div class="account">
            <van-cell title="个人信息" size="large" label="头像、昵称、收货地址" is-link to='/myinformation' center/>
            <van-cell title="账号与安全" size="large" label="修改密码、修改手机号" is-link center />
            <van-cell title="收货地址" value="" is-link />
            <!-- 切换账号&退出登录 -->
            <van-button  type="default" size="large" color="#f7d247" to="/login">切换账号</van-button>
            <van-button  type="default" size="large" color="#e7e7e7" to="/login">退出登录</van-button>
        </div>
    </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
#main {
    width: 96%;
    margin: 0 auto;
    background: #f4f4f4;
    position: relative;

    // header
    .header {
        height: 50px;
        background: white;
        border-bottom: 10px;

        h2 {
            text-align: center;
            font-size: 28px;
        }

        .van-icon {
            position: absolute;
            left: 5px;
            top: 8px;
        }
    }

    // 个人信息和安全
    .account {
        margin-bottom: 20px;

        .van-cell,.van-button {
            margin-bottom: 10px;

        }
      /*   .van-button[type="primary"]{
            background: #f7d247;
        } */

    }
}
</style>